<template>
    <div id="letter">
        <div>{{ letter }}</div>
    </div>
</template>

<script>
import tools from '../utils/tools.js'

export default {
    data() {
        return {
            letter: '',
            letters: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'l', 'k', 'j', 'h', 'g', 'f', 'd', 's', 'a', 'z', 'x', 'c', 'ü', 'b', 'n', 'm', 'zh', 'ch', 'sh'],
            qianbiyin: ['an', 'en', 'in', 'un', 'ün'],
            houbiyin: ['ang', 'eng', 'ing', 'ong'],
            fuyunmu: ['ai', 'ei', 'ui', 'ao', 'ou', 'iu', 'ie', 'üe', 'er'],
            timer: null
        }
    },
    created() {
        const sleep = parseInt(this.$route.query.sleep)
        this.setConfig()
        this.show()
        this.timer = setInterval(this.show, 1000 * sleep)
    },
    methods: {
        setConfig() {
            let tmp = this.letters
            if (this.$route.query.qian == '1') {
                tmp = tmp.concat(this.qianbiyin)
            }
            if (this.$route.query.hou == '1') {
                tmp = tmp.concat(this.houbiyin)
            }
            if (this.$route.query.fu == '1') {
                tmp = tmp.concat(this.fuyunmu)
            }
            tmp = tmp.filter((le) => {
                return le && le.trim()
            })
            tmp = tools.randomArr(tmp)
            tmp.push('完')
            this.letters = tmp
        },
        show() {
            this.letter = this.letters.shift()
            if (this.letters.length < 1) {
                clearInterval(this.timer)
            }
        }
    }
}
</script>

